<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2025/10/15
  Time: 15:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <meta charset="UTF-8">
    <title>优学堂</title>
    <!-- js -->
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/swiper.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/front-index.js"></script>
    <script src="${pageContext.request.contextPath}/js/template-web.js"></script>
    <!-- css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/swiper.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <link rel="stylesheet" href='${pageContext.request.contextPath}/iconfont/font_1/iconfont.css'>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/front-index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css">
    <style>
        html,
        body {
            height: 100%;
        }

        body>.wrap-cc {
            min-height: 100%;
        }

        .content-cc {
            /* padding-bottom 等于 footer 的高度 */
            padding-bottom: 80px;
        }

        .footer-cc {
            width: 100%;
            height: 80px;
            /* margin-top 为 footer 高度的负值 */
            margin-top: -80px;
        }
        .course-box {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: flex-start;
        }

        .course-item {
            width: calc(20% - 16px); /* 一行5个，每个占20%宽度，减去间距 */
            background: #fff;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .course-item .item-t {
            position: relative;
            height: 140px;
            overflow: hidden;
        }

        .course-item .item-t img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .course-item .java {
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .course-item .java label {
            background: rgba(0,0,0,0.7);
            color: #fff;
            padding: 3px 10px;
            border-radius: 2px;
            font-size: 12px;
            margin-right: 5px;
            display: inline-block;
        }

        .course-item .item-b {
            padding: 15px;
        }

        .course-item .item-b h4 {
            font-size: 14px;
            line-height: 1.4;
            height: 40px;
            overflow: hidden;
            margin-bottom: 10px;
            color: #333;
            font-weight: normal;
        }

        .course-item .item-b .title {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
            line-height: 1.5;
        }

        .course-item .item-b .title span {
            margin-right: 10px;
        }

        .course-item .item-b .price {
            font-size: 16px;
            color: #f60;
            font-weight: bold;
        }
    </style>
    <script type="text/javascript">
        // 页面加载完成后执行的函数
        $(function() {
            // 页面加载完成后执行加载网站的课程分类数据并在页面左侧显示
            loadCourseCategories();
            // 加载网站首页的热门推荐课程，显示在推荐区域
            loadTop4Courses();
            // 为页面上的课程分类添加点击事件和交互效果
            addTypeClickEvents();
            // 加载特定分类下的热门课程数据
            loadTop4CoursesForCategory();
            // 加载网站的所有课程数据并显示在页面上
            loadAllCourses();

            // 定义加载课程分类的函数
            function loadCourseCategories() {
                // 在分类区域显示加载中的提示
                $('#typeItemDiv').html('<div style="text-align:center;padding:20px;"><i class="fa fa-spinner fa-spin"></i> 加载中...</div>');

                // 发送AJAX请求获取课程分类数据
                $.ajax({
                    url: '${pageContext.request.contextPath}/type/findTopLevelTypes',
                    dataType: 'json',
                    type: 'GET',
                    success: function(data) {
                        $('#typeItemDiv').html('');
                        console.log('分类数据加载成功:', data);
                        if(data && data.responseCode === '2001' && data.returnObject && data.returnObject.length > 0) {
                            // 使用模板引擎渲染分类数据
                            var txt = template('typeItemList', {list: data.returnObject});
                            $('#typeItemDiv').html(txt);
                            // 重新绑定分类点击事件
                            addTypeClickEvents();
                        } else {
                            $('#typeItemDiv').html('<div style="text-align:center;padding:20px;"><i class="fa fa-info-circle"></i> 暂无课程分类</div>');
                            console.warn('分类数据为空或格式错误:', data);
                        }
                    },

                });
            }

            // 定义添加分类点击事件的函数
            function addTypeClickEvents() {
                // 一级分类点击事件
                $('.type1').off('click').on('click', function() {
                    var typeId = $(this).data('id');
                    // 获取分类名称
                    var typeName = $(this).find('span').text();
                    console.log('点击一级分类:', typeName, 'ID:', typeId);
                    // 跳转到对应分类的课程列表页面
                    window.location.href = '${pageContext.request.contextPath}/course/list?typeId=' + typeId + '&typeLevel=1&typeName=' + encodeURIComponent(typeName);
                });

                // 二级分类点击事件
                $('.type2').off('click').on('click', function(e) {
                    // 阻止事件冒泡
                    e.stopPropagation();
                    var typeId = $(this).data('id');
                    // 获取分类名称
                    var typeName = $(this).text();
                    console.log('点击二级分类:', typeName, 'ID:', typeId);

                    // 跳转到对应分类的课程列表页面
                    window.location.href = '${pageContext.request.contextPath}/course/list?typeId=' + typeId + '&typeLevel=2&typeName=' + encodeURIComponent(typeName);
                });

                // 三级分类点击事件
                $('.type3').off('click').on('click', function(e) {
                    e.stopPropagation();
                    var typeId = $(this).attr('typeId');
                    var typeName = $(this).text();
                    console.log('点击三级分类:', typeName, 'ID:', typeId);

                    // 移除所有三级分类的active类
                    $('.type3').removeClass('active');
                    $(this).addClass('active');

                    // 显示该分类下的课程
                    showCategoryCourses(typeId, typeName);
                });

                // 分类悬停效果
                $('.item').hover(function() {
                    // 鼠标进入时添加hover类并显示子分类内容
                    $(this).addClass('hover');
                    $(this).find('.type-item-content').show();
                }, function() {
                    // 鼠标离开时移除hover类并隐藏子分类内容
                    $(this).removeClass('hover');
                    $(this).find('.type-item-content').hide();
                });

                // 确保子分类内容初始状态为隐藏
                $('.type-item-content').hide();

                // 添加子分类区域的悬停效果，防止鼠标从一级分类移到子分类区域时子分类消失
                $('.type-item-content').hover(function() {
                    // 鼠标进入子分类区域时保持父级hover状态和显示状态
                    $(this).parent().addClass('hover');
                    $(this).show();
                }, function() {
                    // 鼠标离开子分类区域时移除父级hover状态和隐藏子分类
                    $(this).parent().removeClass('hover');
                    $(this).hide();
                });
            }

            // 定义登录状态变量
            var isLogin = false;
            // 在控制台输出登录状态
            console.log("isLogin=", isLogin);
            // 根据登录状态更新用户界面
            changeUserDiv(isLogin);

            // 注册提交按钮点击事件
            $("#registerSubmitBtn").on("click", function() {
                // 获取密码和确认密码的值
                let password = $("#password").val().trim();
                let rePassword = $("#rePassword").val().trim();

                // 检查两次输入的密码是否一致
                if (password !== rePassword) {
                    // 如果不一致，显示错误信息
                    $("#errorMsg").html("两次输入的密码不一致，请重新输入").show();
                    return;
                }

                // 准备注册表单数据
                var formData = {
                    loginName: $("#loginName").val(),
                    password: $("#password").val(),
                    confirmPassword: $("#rePassword").val(),
                    nickname: $("#nickname").val(),
                    email: $("#email").val()
                };

                // 发送注册请求
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/user/frontRegister",
                    data: formData,
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            alert("注册成功！");
                            location.reload();
                        } else {
                            $("#errorMsg").html(result.message).show();
                        }
                    },
                    error: function(xhr, status, error) {
                        $("#errorMsg").html("注册失败，请稍后重试").show();
                        console.error("注册请求失败:", status, error);
                    }
                });
            });

            // 退出登录链接点击事件
            $("a:contains('退出登录')").on("click", function() {
                location.href = "${pageContext.request.contextPath}/user/logout";
                return false;
            });

            // 登录按钮点击事件
            $("#login_modal .btn-info").off("click").on("click", function() {

                let username = $("#login_modal input[name='username']").val();
                let password = $("#login_modal input[name='password']").val();


                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/user/frontLogin",
                    data: {
                        loginName: username,
                        password: password
                    },
                    dataType: "json",
                    success: function(result) {

                        console.log("登录响应:", result);
                        if (result.responseCode == "2001") {
                            changeUserDiv(true);
                            // 更新登录状态变量
                            isLogin = true;
                            // 如果有用户信息，更新用户信息显示
                            if (result.returnObject) {
                                var userInfo = result.returnObject;
                                $("#loginOn .dropdown-menu.userinfo p:first").text("我叫" + userInfo.nickname);
                                // 更新金币和积分显示
                                $("#loginOn .dropdown-menu.userinfo p:contains('金币') span:first").text(userInfo.allGold);
                                $("#loginOn .dropdown-menu.userinfo p:contains('积分') span:last").text(userInfo.allPoint);
                                $("#userSetForm input[name='id']").val(userInfo.id);
                            }
                            alert("登录成功！");
                        } else {
                            alert("登录失败: " + result.message);
                        }
                    }
                });
            });

            // 用户设置表单提交事件
            $("#userSetForm").on("submit", function(e) {
                e.preventDefault();
                // 创建FormData对象
                let formData = new FormData($("#userSetForm")[0]);
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/user/UserInformationUpdate",
                    data: formData,
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            alert("更新成功！");
                            window.location.href = "${pageContext.request.contextPath}/showIndex";
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                });
                return false;
            });
        });

        // 打开用户模态框函数
        function openUserModal(isRegist) {
            // 如果是注册，显示注册模态框
            if (isRegist) {
                $("#regist_modal").modal("show");
                return;
            }
            // 否则显示登录模态框
            $("#login_modal").modal("show");
        }

        // 更新用户界面显示状态的函数
        function changeUserDiv(isLogin) {

            if (isLogin) {

                $("#loginOff").hide();
                $("#loginOn").show();
                $("#login_modal").modal("hide");
                $(".signBtn").html("已签到").unbind("click").addClass('gray').removeClass('hoverRed');
            } else {
                // 如果未登录，显示未登录状态元素，隐藏已登录状态元素
                $("#loginOn").hide();
                $("#loginOff").show();
            }
        }

        // 定义全局变量存储所有分类课程数据
        var allCategoryCoursesData = null;

        // 显示分类课程的函数
        function showCategoryCourses(typeId, typeName) {
            // 更新页面标题为当前分类名称
            $('.two-title h3').text(typeName + ' 推荐课程');

            // 如果已有课程数据，直接渲染
            if (allCategoryCoursesData && allCategoryCoursesData.length > 0) {
                renderCategoryCourses(typeId);
            } else {
                // 如果数据未加载，先加载数据
                loadTop4CoursesForCategory(typeId);
            }
        }

        // 加载特定分类前4门课程的函数
        function loadTop4CoursesForCategory(targetTypeId) {
            // 显示加载中的提示
            $('.two .item-box').html('<div style="text-align:center;padding:20px;"><i class="fa fa-spinner fa-spin"></i> 加载课程中...</div>');

            // 发送AJAX请求获取分类课程数据
            $.ajax({
                url: "${pageContext.request.contextPath}/course/getTop4Courses",
                type: "GET",
                data: { typeId: targetTypeId },
                dataType: "json",
                success: function(data) {
                    // 在控制台输出响应数据
                    console.log('加载分类课程数据响应:', data);

                    // 检查响应数据是否有效
                    if (data && data.responseCode === "2001" && data.returnObject && data.returnObject.length > 0) {
                        // 存储数据到全局变量
                        allCategoryCoursesData = data.returnObject;

                        // 渲染当前分类的课程
                        renderCategoryCourses(targetTypeId);
                    } else {
                        // 数据无效时显示提示
                        console.warn('未获取到分类课程数据或数据格式错误:', data);
                        $('.two .item-box').html('<div style="text-align: center; padding: 50px;">该分类暂无推荐课程</div>');
                    }
                },
                error: function(xhr, status, error) {
                    // 请求失败处理
                    console.error('加载分类课程数据失败:', error, '状态:', status);
                    $('.two .item-box').html('<div style="text-align: center; padding: 50px; color: #f00;">加载课程失败，请稍后重试</div>');
                }
            });
        }

        // 加载首页前4门推荐课程的函数
        function loadTop4Courses() {
            // 发送AJAX请求获取首页推荐课程
            $.ajax({
                url: "${pageContext.request.contextPath}/front/course/getIndexTop4Courses",
                type: "GET",
                dataType: "json",
                success: function (data) {
                    // 检查响应数据是否有效
                    if (data.responseCode === "2001" && data.returnObject && data.returnObject.length > 0) {
                        // 使用模板引擎渲染课程数据
                        var html = template('categoryCourseTpl', {list: data.returnObject});
                        // 将渲染后的HTML插入到页面中
                        $('.two .item-box').html(html);
                    } else {
                        console.warn('未获取到推荐课程数据');
                        $('.two .item-box').html('<div style="text-align: center; padding: 50px;">暂无推荐课程</div>');
                    }
                },
                error: function (xhr, status, error) {

                    console.error('加载推荐课程数据失败:', error);
                    $('.two .item-box').html('<div style="text-align: center; padding: 50px; color: #f00;">加载课程失败，请稍后重试</div>');
                }
            });
        }

        // 渲染分类课程的函数
        function renderCategoryCourses(typeId) {
            // 将类型ID转换为字符串
            typeId = String(typeId);

            // 在全局数据中查找对应的分类
            var targetCategory = allCategoryCoursesData.find(function(item) {
                return String(item.typeId) === typeId;
            });

            // 如果找到分类且有课程数据，渲染课程
            if (targetCategory && targetCategory.top4Courses && targetCategory.top4Courses.length > 0) {
                var html = template('categoryCourseTpl', {list: targetCategory.top4Courses});
                $('.two .item-box').html(html);
            } else {
                // 没有课程数据时显示提示
                $('.two .item-box').html('<div style="text-align: center; padding: 50px;">该分类暂无推荐课程</div>');
            }
        }

        // 加载所有课程的函数
        function loadAllCourses() {
            // 发送AJAX请求获取所有课程
            $.ajax({
                url: "${pageContext.request.contextPath}/course/getAllCourses",
                type: "GET",
                dataType: "json",
                success: function(data) {
                    if (data.responseCode == "2001") {
                        // 使用模板引擎渲染所有课程数据
                        var html = template('allCourseTpl', {list: data.returnObject || []});
                        // 将渲染后的HTML插入到页面中
                        $('#allCourseContainer').html(html);
                    } else {
                        $('#allCourseContainer').html(`<div style="text-align: center; padding: 50px; color: #f00;">${data.message}</div>`);
                    }
                },
                error: function(xhr) {
                    // 请求失败处理
                    $('#allCourseContainer').html(`<div style="text-align: center; padding: 50px; color: #f00;">所有课程加载失败：${xhr.statusText}</div>`);
                }
            });
        }
    </script>
    ```
</head>

<body>
<div class="wrap-cc">
    <div id="errorMsg" style="color: red;"></div>
    <div class="content-cc">
        <!-- head -->
        <nav class="navbar navbar-default">
            <div class="container-fluid" style="background: #fff;box-shadow: 5px 5px 5px #eef;padding-left: 20px;">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <!--  <a class="navbar-brand" href="#">Brand</a> -->
                    <img src="images/com-logo1.png" alt="" width="120" style="margin-right: 20px;">
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="#" class="vertical-middle">免费课程</a></li>
                        <li><a href="#" class="vertical-middle">职业路径</a></li>
                    </ul>












                    <form action="${pageContext.request.contextPath}/type/toSearch" class="navbar-form navbar-left searchInput" method="get">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search" name="keyword">
                        </div>
                        <button type="submit" class="btn btn-default">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </form>


















                    <div id="loginOff" class="regist ccc">
                        <span style="margin-right: 20px;font-size: 14px;">下载APP</span>
                        <a href="javascript:openUserModal(false);" class="ccc">登录</a> &nbsp;&nbsp;/&nbsp;&nbsp;
                        <a href="javascript:openUserModal(true);" class="ccc">注册</a>
                    </div>
                    <ul id="loginOn" class="nav navbar-nav navbar-right">
                        <li class="nav navbar-nav signIn">
                            <div class="signBtn hoverRed">签到</div>
                            <div class="expe">+5积分</div>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle user-active" data-toggle="dropdown" role="button">
                                <img class="img-circle" src="images/user.jpeg" id="userImg">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu userinfo cc">
                                <li>
                                    <img src="images/user.jpeg" class="img-circle" alt="">
                                    <div class="">
                                        <p>我叫细倩倩</p>
                                        <p>金币<span>236</span>&nbsp;积分 <span>0</span></p>
                                    </div>
                                </li>
                                <li>
                                    <a href="${pageContext.request.contextPath}/userResource/findAll">
                                        <i class="glyphicon glyphicon-edit"></i>我的课程
                                    </a>
                                    <a href="${pageContext.request.contextPath}/goldPoints/findAll">
                                        <i class="glyphicon glyphicon-record"></i>积分记录
                                    </a>
                                </li>
                                <li>
                                    <a href="#" data-toggle="modal" data-target="#userSet">
                                        <i class="glyphicon glyphicon-cog"></i>个人设置
                                    </a>
                                    <a href="javascript:void(0);"><i class="glyphicon glyphicon-off"></i>退出登录</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

            </div>

        </nav>
        <!-- nav -->
        <div class="main">
            <!-- 左侧 -->
            <div id="typeItemDiv" class="menu-left">
                <div class="item" data-id="a">
                    <a href="#">
                        <span class="group">前端开发1</span>
                        <span class="tip">&gt;</span>
                    </a>
                    <div class="course-detail">
                        <div class="one">
                            <div class="base">
                                <span>基础</span>
                                <div class="line"></div>
                            </div>
                            <p>
                                <a href="#"><span>HTML/CSS</span></a>
                                <!-- <a href="#"><span>JavaScript</span></a>
                                <a href="#"><span>jQuery</span></a> -->
                            </p>
                        </div>
                        <!-- <div class="one">
                            <div class="base">
                                <span>进阶</span>
                                <div class="line"></div>
                            </div>
                            <p>
                                <a href="#"><span>HTML/CSS</span></a>
                                <a href="#"><span>JavaScript</span></a>
                                <a href="#"><span>jQuery</span></a>
                            </p>
                        </div> -->

<%--                        <div class="two">--%>
<%--                            <div class="item-box">--%>
<%--                                <a href="front_course.html">--%>
<%--                                    <div class="item-course">--%>
<%--                                        <div class="item-course-l">--%>
<%--                                            <img src="./images/course04.jpg" alt="">--%>
<%--                                        </div>--%>
<%--                                        <div class="item-course-r">--%>
<%--                                            <p>前端进阶：响应式开发与常用框架</p>--%>
<%--                                            <p>--%>
<%--                                                <span>职业路径</span>--%>
<%--                                                <span>5步/30课</span>--%>
<%--                                                <span>503人</span>--%>
<%--                                            </p>--%>
<%--                                            <p>￥599.00</p>--%>
<%--                                        </div>--%>
<%--                                    </div>--%>
<%--                                </a>--%>
<%--                                <a href="front_course.html">--%>
<%--                                    <div class="item-course">--%>
<%--                                        <div class="item-course-l">--%>
<%--                                            <img src="./images/course02.jpg" alt="">--%>
<%--                                        </div>--%>
<%--                                        <div class="item-course-r">--%>
<%--                                            <p>前端进阶：响应式开发与常用框架</p>--%>
<%--                                            <p>--%>
<%--                                                <span>职业路径</span>--%>
<%--                                                <span>5步/30课</span>--%>
<%--                                                <span>503人</span>--%>
<%--                                            </p>--%>
<%--                                            <p>￥599.00</p>--%>
<%--                                        </div>--%>
<%--                                    </div>--%>
<%--                                </a>--%>
<%--                                <a href="front_course.html">--%>
<%--                                    <div class="item-course">--%>
<%--                                        <div class="item-course-l">--%>
<%--                                            <img src="./images/course03.jpg" alt="">--%>
<%--                                        </div>--%>
<%--                                        <div class="item-course-r">--%>
<%--                                            <p>前端进阶：响应式开发与常用框架</p>--%>
<%--                                            <p>--%>
<%--                                                <span>职业路径</span>--%>
<%--                                                <span>5步/30课</span>--%>
<%--                                                <span>503人</span>--%>
<%--                                            </p>--%>
<%--                                            <p>￥599.00</p>--%>
<%--                                        </div>--%>
<%--                                    </div>--%>
<%--                                </a>--%>
<%--                            </div>--%>
<%--                        </div>--%>
                        <div class="two">
                            <div class="two-title">
                                <h3>推荐课程</h3>
                            </div>
                            <div class="item-box">
                                <!-- 这里将由JS动态填充 -->
                                <div style="text-align: center; padding: 50px;">加载中...</div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="item" data-id="a">
                    <a href="#">
                        <span class="group">前端开发</span>
                        <span class="tip">&gt;</span>
                    </a>
                    <div class="course-detail">
                        <div class="one">
                            <div class="base">
                                <span>基础</span>
                                <div class="line"></div>
                            </div>
                            <p>
                                <a href="#"><span>HTML/CSS</span></a>
                                <a href="#"><span>JavaScript</span></a>
                                <a href="#"><span>jQuery</span></a>
                            </p>
                        </div>
                        <div class="one">
                            <div class="base">
                                <span>进阶</span>
                                <div class="line"></div>
                            </div>
                            <p>
                                <a href="#"><span>HTML/CSS</span></a>
                                <a href="#"><span>JavaScript</span></a>
                                <a href="#"><span>jQuery</span></a>
                            </p>
                        </div>
                        <div class="two">
                            <div class="item-box">
                                <a href="front_course.html">
                                    <div class="item-course">
                                        <div class="item-course-l">
                                            <img src="./images/course04.jpg" alt="">
                                        </div>
                                        <div class="item-course-r">
                                            <p>前端进阶：响应式开发与常用框架</p>
                                            <p>
                                                <span>职业路径</span>
                                                <span>5步/30课</span>
                                                <span>503人</span>
                                            </p>
                                            <p>￥599.00</p>
                                        </div>
                                    </div>
                                </a>
                                <a href="front_course.html">
                                    <div class="item-course">
                                        <div class="item-course-l">
                                            <img src="./images/course02.jpg" alt="">
                                        </div>
                                        <div class="item-course-r">
                                            <p>前端进阶：响应式开发与常用框架</p>
                                            <p>
                                                <span>职业路径</span>
                                                <span>5步/30课</span>
                                                <span>503人</span>
                                            </p>
                                            <p>￥599.00</p>
                                        </div>
                                    </div>
                                </a>
                                <a href="front_course.html">
                                    <div class="item-course">
                                        <div class="item-course-l">
                                            <img src="./images/course03.jpg" alt="">
                                        </div>
                                        <div class="item-course-r">
                                            <p>前端进阶：响应式开发与常用框架</p>
                                            <p>
                                                <span>职业路径</span>
                                                <span>5步/30课</span>
                                                <span>503人</span>
                                            </p>
                                            <p>￥599.00</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <script id="typeItemList" type="text/html" >
                {{each list type1 index}}
                <div class="item" typeId="{{type1.id}}">
                    <a href="#">
                        <span class="group">{{type1.typeName}}</span>
                        <span class="tip">&gt;</span>
                    </a>
                    <div class="course-detail">
                        {{each type1.children type2 index2}}
                        <div class="one">
                            <div class="base" typeId="{{type2.id}}" >
                                <span>{{type2.typeName}}</span>
                                <div class="line"></div>
                            </div>
                            <p>
                                {{each type2.children type3 index3}}
                                <a href="#">
                                    <span typeId="{{type3.id}}" class="type3">{{type3.typeName}}</span>
                                </a>
                                {{/each}}
                            </p>
                        </div>
                        {{/each}}

                        <!-- 当前分类下,点击量前四的课程 -->
                        <div class="two">
                            <div class="item-box" >
                                <a href="front_course.html">
                                    <div class="item-course">
                                        <div class="item-course-l">
                                            <img src="./images/course04.jpg" alt="">
                                        </div>
                                        <div class="item-course-r">
                                            <p>前端进阶：响应式开发与常用框架</p>
                                            <p>
                                                <span>职业路径</span>
                                                <span>5步/30课</span>
                                                <span>503人</span>
                                            </p>
                                            <p>￥599.00</p>
                                        </div>
                                    </div>
                                </a>
                                <a href="front_course.html">
                                    <div class="item-course">
                                        <div class="item-course-l">
                                            <img src="./images/course02.jpg" alt="">
                                        </div>
                                        <div class="item-course-r">
                                            <p>前端进阶：响应式开发与常用框架</p>
                                            <p>
                                                <span>职业路径</span>
                                                <span>5步/30课</span>
                                                <span>503人</span>
                                            </p>
                                            <p>￥599.00</p>
                                        </div>
                                    </div>
                                </a>
                                <a href="front_course.html">
                                    <div class="item-course">
                                        <div class="item-course-l">
                                            <img src="./images/course03.jpg" alt="">
                                        </div>
                                        <div class="item-course-r">
                                            <p>前端进阶：响应式开发与常用框架</p>
                                            <p>
                                                <span>职业路径</span>
                                                <span>5步/30课</span>
                                                <span>503人</span>
                                            </p>
                                            <p>￥599.00</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {{/each}}
            </script>







            <script id="top4CourseTpl" type="text/html">
            <div class="course">
                <div class="course-box">
                    {{each list as course index}}
                    <div class="course-item">
                        <div class="item-t">
<%--                            <img src="${pageContext.request.contextPath}/upload/{{course.coverImage}}" alt="{{course.courseName}}">--%>
    <img src="${pageContext.request.contextPath}{{course.coverImageUrl}}" alt="{{course.courseName}}"/>
                            <div class="java">
                                <label>{{course.typeName}}</label>
                            </div>
                        </div>
                        <div class="item-b">
                            <a href="${pageContext.request.contextPath}/course/findByIdAll?id={{course.id}}">
                                <h4>{{course.courseName}}</h4>
                            </a>
                            <p class="title">
                                <span>{{course.courseLevel}}</span>
                                <span>{{course.clickNumber}}人学习</span>
                                <span>￥{{course.price}}</span>
                                <span>{{course.score}}星</span>
                            </p>
                            <p class="price">￥ {{course.price}}</p>
                            <p class="author">作者：{{course.authorName}}</p>
                        </div>
                    </div>
                    {{/each}}
                </div>
            </div>
            </script>


            <script id="categoryCourseTpl" type="text/html">
                {{each list as course index}}
                <a href="${pageContext.request.contextPath}/front/course/detail?courseId={{course.id}}">
                    <div class="item-course">
                        <div class="item-course-l">
                            <img src="${pageContext.request.contextPath}/images/course04.jpg" alt="{{course.courseName}}">
                        </div>
                        <div class="item-course-r">
                            <p>{{course.courseName}}</p>
                            <p>
                                <span>职业路径</span>
                                <span>5步/30课</span>
                                <span>{{course.clickNumber}}人</span>
                            </p>
                            <p>￥ {{course.price}}.00</p>
                        </div>
                    </div>
                </a>
                {{/each}}
            </script>



<%--            <script id="allCourseTpl" type="text/html">--%>
<%--                {{each list as course index}}--%>
<%--                <a href="${pageContext.request.contextPath}/front/course/detail?courseId={{course.id}}">--%>
<%--                    <div class="item-course">--%>
<%--                        <div class="item-course-l">--%>
<%--                            <img src="${pageContext.request.contextPath}/images/course04.jpg" alt="{{course.courseName}}">--%>
<%--                        </div>--%>
<%--                        <div class="item-course-r">--%>
<%--                            <p>{{course.courseName}}</p>--%>
<%--                            <p>--%>
<%--                                <span>职业路径</span>--%>
<%--                                <span>5步/30课</span>--%>
<%--                                <span>{{course.clickNumber}}人</span>--%>
<%--                            </p>--%>
<%--                            <p>￥ {{course.price}}.00</p>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </a>--%>
<%--                {{/each}}--%>
<%--            </script>--%>
            <script id="allCourseTpl" type="text/html">
                {{each list as course index}}
                <div class="course-item">
                    <div class="item-t">
                        <img src="${pageContext.request.contextPath}/images/course0{{(index % 5) + 1}}.jpg" alt="{{course.courseName}}">
                        <div class="java">
                            <label>{{course.typeName || 'Java'}}</label>
                        </div>
                    </div>
                    <div class="item-b">
                        <a href="${pageContext.request.contextPath}/front/course/detail?courseId={{course.id}}">
                            <h4>{{course.courseName}}</h4>
                        </a>
                        <p class="title">
                            <span>实战</span>
                            <span>高级</span>
                            <span>￥{{course.price || '400'}}</span>
                            <span>{{course.score || '4'}}星</span>
                        </p>
                        <p class="price">￥ {{course.price || '399.00'}}</p>
                    </div>
                </div>
                {{/each}}
            </script>












            <!-- 右侧 -->
            <div class="menu-right">
                <!-- banner -->
                <div class="banner">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="./images/banner01.jpg" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="./images/banner02.jpg" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="./images/banner03.jpg" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="./images/banner04.jpg" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="./images/banner05.jpg" alt="">
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <!-- 课程信息 -->
                <div class="tips">
                    <div class="path-banner">
                        <a href="#">
                            <i class="i-web"></i>
                            <p class="tit">Web前端攻城狮</p>
                            <p class="desc">互联网时代最火爆的技术</p>
                        </a>
                        <a href="#">
                            <i class="i-java"></i>
                            <p class="tit">Java攻城狮</p>
                            <p class="desc">健壮、安全、适用广泛</p>
                        </a>
                        <a href="#">
                            <i class="i-android"></i>
                            <p class="tit">Android攻城狮</p>
                            <p class="desc">移动设备市场份额第一</p>
                        </a>
                        <a href="#">
                            <i class="i-php"></i>
                            <p class="tit">PHP攻城狮</p>
                            <p class="desc">世界上最好的语言：）</p>
                        </a>
                        <a href="#">
                            <i class="i-ios"></i>
                            <p class="tit">iOS攻城狮</p>
                            <p class="desc">可能是全球最好用的系统</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>


<%--        <div class="course-title">--%>
<%--            <h2>热门推荐课程</h2>--%>
<%--            <div class="line"></div>--%>
<%--        </div>--%>
<%--        <div id="top4CourseContainer"></div>--%>
        <!-- 实战推荐 -->
        <div class="course all-course">
            <h3 class="types-title">
                <span class="tit-icon tit-icon-l"></span>
                <em>实</em>／<em>战</em>／<em>推</em>／<em>荐</em>
            </h3>
            <div class="course-box" id="allCourseContainer">
                <div style="text-align: center; padding: 50px; color: #999;">...</div>
            </div>
        </div>

    </div>
</div>
<div class="footer-cc">
    <div class="foots">
        <div>
            版权所有： 南京网博
        </div>
        <div>
            Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2
        </div>
    </div>
</div>


<div class="modal fade" id="userSet" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">个人信息</h4>
            </div>
            <form action="#" class="form-horizontal" method="post" id="userSetForm">

                <input type="hidden" name="id" value="${userId}" />

                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">旧密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="oldPassword" />
                        </div>
                    </div>
                    <!-- 修改为正确的新密码字段 -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">新密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="newPassword" />
                        </div>
                    </div>
                    <!-- 保留一个确认密码字段 -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">确认密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="confirmPassword" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">昵称：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="nickname" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">邮箱：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="email" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                    <button type="reset" class="btn btn-info">重&nbsp;&nbsp;置</button>
                    <button type="submit" class="btn btn-info">确&nbsp;&nbsp;定</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- regist modal -->
<div class="modal fade" id="regist_modal" tabindex="-1" role="dialog" aria-labelledby="myRegistLabel">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myRegistLabel">注册</h4>
            </div>
            <form class="form-horizontal" method="post" id="registForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">登录名：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="loginName" id="loginName" />
                            <span class="help-block" id="loginNameError"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="password" id="password" />
                            <span class="help-block" id="passwordError"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">确认密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="rePassword" id="rePassword" />
                            <span class="help-block" id="rePasswordError"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">昵称：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="nickname" id="nickname" />
                            <span class="help-block" id="nicknameError"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">邮箱：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="email" id="email" />
                            <span class="help-block" id="emailError"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="registerSubmitBtn">注册</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- login modal -->
<div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="myLoginLabel">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myLoginLabel">登录</h4>
            </div>
            <form action="#" class="form-horizontal" method="post">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">登录名：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="username" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="password" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                    <button type="button" class="btn btn-info">登&nbsp;&nbsp;录</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

</html>
